<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="../bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet">
  <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
</head>

<body class="container">
  <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
    aria-controls="offcanvasExample">
    使用链接的 href 属性
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
    aria-controls="offcanvasExample">
    按钮中使用 data-bs-target
  </button>
  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasExampleLabel">山中雪后</h5>
      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div>晨起开门雪满山，雪晴云淡日光寒。檐流未滴梅花冻，一种清孤不等闲。</div>
      <div class="dropdown mt-3">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
          data-bs-toggle="dropdown">
          更多古诗
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">古诗1</a></li>
          <li><a class="dropdown-item" href="#">古诗2</a></li>
          <li><a class="dropdown-item" href="#">古诗3</a></li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>